<script setup lang="js">
  import { ref } from 'vue'

  const cost = ref(0);

  function add() {
    cost.value ++;
  }
  function minus() {
    cost.value --;
  }
  function reset() {
    cost.value = 0;
  }

</script>

<template>
  <q-banner rounded class="bg-purple-8 text-white">
    <p class="text-h4">陈一非 23211860123</p>
    <template v-slot:action>
      <q-btn flat color="white" label="增加" @click="add"/>
      <q-btn flat color="white" label="减少" @click="minus"/>
      <q-btn flat color="white" label="重置" @click="reset"/>
    </template>
    <div class="text-h6 text-black bg-white text-center q-pa-md rounded-borders" style="min-width: 120px">
      {{ cost }}
    </div>
  </q-banner>
</template>

<style scoped>

</style>
